/*
 * @Author: yuanxiang 
 * @Date: 2018-05-11 10:16:26 
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2018-07-14 15:52:56
 */
<template>
<div class="gq">
  <bg-lay-out>
    <div slot="headerText">钢圈数据中心</div>
    <top-bar-sel :barWidth="'41%'" slot="headerMain"  :topNav="topNav" @changeTab="onNav"></top-bar-sel>
    <div slot="main" style="position:relative">
    	<div v-if="tabId == '4'">
    		<div class="sellAnalyDate marginBot-20"> <sel-date class="selDateCon" @onTime='onTime'></sel-date> </div>
        
    		<el-row type="flex" class="topElRowCon marginBot-20">
    			<div class="topLeftCon">
    				<div class="itemTop" style="padding-left:40px">
    					<div class="itemTopText">今日销量(吨)</div>
    					<b class="boldFont">
    		                  <i-count-up :startVal="startVal" :endVal="todaySalesVolume" :decimals="decimals" :duration="duration" :options="options" />
    		                </b>
    				</div>
    				<div class="itemTop" style="padding-right:40px">
    					<div class="itemTopText">累计销量(吨)</div>
    					<b class="boldFont">
    		                  <i-count-up :startVal="startVal" :endVal="sumSalesVolume" :decimals="decimals" :duration="duration" :options="options" />
    		                </b>
    				</div>
    			</div>
    			<div class="topLeftCon" style="margin-left: 20px">
    				<div class="itemTop" style="padding-left:40px">
    					<div class="itemTopText">今日毛利 (元)</div>
    					<b class="boldFont">
    		                  <i-count-up :startVal="startVal" :endVal="todayGrossMargin" :decimals="decimals" :duration="duration" :options="options" />
    		                </b>
    				</div>
    				<div class="itemTop" style="padding-right:40px">
    					<div class="itemTopText">累计毛利 (元)</div>
    					<b class="boldFont">
    		                  <i-count-up :startVal="startVal" :endVal="sumGrossMargin" :decimals="decimals" :duration="duration" :options="options" />
    		                </b>
    				</div>
    			</div>
    			<div class="topRightCon">
    				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="minTopLeftCon">
    					<div class="itemTop">
    						<div class="itemTopText">累计采购量</div>
    						<b class="boldFont">
    		                  <i-count-up :startVal="startVal" :endVal="sumProcurement" :decimals="decimals" :duration="duration" :options="options" />
    		                </b>
    					</div>
    				</el-col>
    			</div>
    		</el-row>
    		<el-row type="flex" class="marginBot-20">
    			<div class="midCon">
    				<el-row type="flex" justify="space-between" style="width:100%">
    					<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="minTopLeftCon">
    						<div class="topRightLLine">
    							<div class="topRightTextCon">
    								<div class="topRightLTopTitleLine">
    								</div>
    								<span class="topRightLTopTitle">厂家日销量统计</span>
    							</div>
    							<div class="selCon">
    								<el-select @change="onDaySaleType" style="width:75px" v-model="daySaleTypeDefalut">
    									<el-option v-for="item in daySaleTypeArr" :key="item.value" :label="item.label" :value="item.value">
    									</el-option>
    								</el-select>
    							</div>
    						</div>
    						<chart :chartStyle="'min-height:230px;height:330px'" :option="daySaleOption" />
    						<div class="chartLine"></div>
    					</el-col>
    					<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="minTopLeftCon">
    						<div class="topRightLLine">
    							<div class="topRightTextCon">
    								<div class="topRightLTopTitleLine">
    								</div>
    								<span class="topRightLTopTitle">库房日销量统计</span>
    							</div>
    							<div class="selCon">
    								<el-select @change="onWarehouseDaySaleType" style="width:75px" v-model="warehouseDaySaleTypeDefalut">
    									<el-option v-for="item in warehouseDaySaleTypeArr" :key="item.value" :label="item.label" :value="item.value">
    									</el-option>
    								</el-select>
    							</div>
    						</div>
    						<chart :chartStyle="'min-height:230px;height:330px'" :option="warehouseDaySaleOption" />
    						<div class="chartLine"></div>
    					</el-col>
    					<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="minTopLeftCon">
    						<div class="topRightLLine">
    							<div class="topRightTextCon">
    								<div class="topRightLTopTitleLine">
    								</div>
    								<span class="topRightLTopTitle">累计采购量</span>
    							</div>
    						</div>
    						<chart :chartStyle="'min-height:230px;height:330px'" :option="sumProcurementOption" />
    						<div class="chartLine"></div>
    					</el-col>
    				</el-row>
    				<div class="lineCon">
    					<div class="lineImg"></div>
    				</div>
    				<el-row type="flex" justify="space-between" style="width:100%">
    					<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="minTopLeftCon">
    						<div class="topRightLLine">
    							<div class="topRightTextCon">
    								<div class="topRightLTopTitleLine">
    								</div>
    								<span class="topRightLTopTitle">厂家累计销量统计</span>
    							</div>
    							<div class="selCon">
    								<el-select @change="onFactorySumSaleType" style="width:75px" v-model="factorySumSaleTypeDefalut">
    									<el-option v-for="item in factorySumSaleTypeArr" :key="item.value" :label="item.label" :value="item.value">
    									</el-option>
    								</el-select>
    							</div>
    						</div>
    						<chart :chartStyle="'min-height:230px;height:330px'" :option="factorySumSaleOption" />
    						<div class="chartLine" style="top:2%"></div>
    					</el-col>
    					<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="minTopLeftCon">
    						<div class="topRightLLine" style="justify-content:space-between">
    							<div style="display:flex">
    								<div class="topRightLTopTitleLine">
    								</div>
    								<span class="topRightLTopTitle">库房累计销量统计</span>
    							</div>
    							<div class="selCon">
    								<el-select @change="fetchFactoryProcurement" style="width:75px" v-model="sumProcurementTypeDefalut">
    									<el-option v-for="item in sumProcurementTypeArr" :key="item.value" :label="item.label" :value="item.value">
    									</el-option>
    								</el-select>
    							</div>
    						</div>
    						<chart :chartStyle="'min-height:230px;height:330px'" :option="factoryProcurementOption" />
    						<div class="chartLine" style="top:2%"></div>
    					</el-col>
    				</el-row>
    			</div>
    		</el-row>
    	</div>
    	<div v-if="tabId == '1'">
    		<sell-marketing :time="statisticalTime"></sell-marketing>
    	</div>
    	<div v-if="tabId == '2'">
    		<!-- <sel-date class="selDateCon" @onTime='onTime'></sel-date> -->
    		<sell-receivables :time="statisticalTime"></sell-receivables>
    	</div>
      <div v-if="tabId == '3'">
        <sell-stock></sell-stock>
      </div>
      <div v-if="tabId == '5'">
        <sell-supplier></sell-supplier>
      </div>
    </div>
  </bg-lay-out>
  </div>
</template>
<script>
import chart from "../../../../components/Charts/newChart";
import ICountUp from "vue-countup-v2";
import selDate from "@/components/gq/selDate";
import { GetDataByTarget, GetSteelTradeInfo } from "@/api/gq/index";
import echarts from "echarts";
import bgLayOut from "@/components/bgLayOut/index";
import sellReceivables from "./sellReceivables";
import sellMarketing from "./sellMarketing";
import sellStock from "./sellStock";
import sellSupplier from "./sellSupplier";
import topBarSel from "@/components/branch/topBarSel";
export default {
  name: "sellAnalysis",
  components: {
    chart,
    selDate,
    ICountUp,
    bgLayOut,
    sellReceivables,
    sellMarketing,
    topBarSel,
    sellStock,
    sellSupplier
  },
  data() {
    return {
      isTest: this.$utils.gqIsTestFalse, //  是否测试数据 ture  测试数据  false 正式数据
      tabId: "1",
      statisticalTime: "",
      factorySumSaleTypeDefalut: "24007",
      factorySumSaleTypeArr: [
        { label: "销量", value: "24007" },
        { label: "毛利", value: "24008" }
      ],
      sumProcurementTypeDefalut: "24009",
      sumProcurementTypeArr: [
        { label: "销量", value: "24009" },
        { label: "毛利", value: "24010" }
      ],
      warehouseDaySaleTypeArr: [
        { label: "销量", value: "24005" },
        { label: "毛利", value: "24006" }
      ],
      warehouseDaySaleTypeDefalut: "24005",
      daySaleTypeDefalut: "24003",
      daySaleTypeArr: [
        { label: "销量", value: "24003" },
        { label: "毛利", value: "24004" }
      ],
      factoryProcurementOption: {}, // 库房累计销量统计
      factorySumSaleOption: {}, // 厂家累计销量
      sumProcurementOption: {}, // 累计采购量
      warehouseDaySaleOption: {}, // 库房日销量
      daySaleOption: {}, // 厂家日销量
      itemW: 0,
      offsetL: 0,
      nowId: 0,
      workNum: 0,
      startVal: 0,
      decimals: 0,
      duration: 2.5,
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ",",
        decimal: ".",
        prefix: "",
        suffix: ""
      },
      topNav: [
        {
          name: "销采分析",
          id: "1"
        },

        {
          name: "应收账款",
          id: "2"
        },
        {
          name: "库存/差价",
          id: "3"
        },
        {
          name: "营销日报",
          id: "4"
        }
        // ,
        // {
        //   name: "供应商",
        //   id: "5"
        // }
      ],
      todaySalesVolume: 0, // 今日销量 ,
      todayGrossMargin: 0, // 今日毛利 ,
      sumSalesVolume: 0, // 累计销量 ,
      sumGrossMargin: 0, // 累计毛利 ,
      sumProcurement: 0, // 累计采购量
      storesIncome: true, // 选中状态
      storeId: ""
    };
  },
  mounted() {},
  methods: {
    onTime(res) {
      (this.statisticalTime = res)
      this.onNav(this.tabId);
    },
    // 钢贸系统采销数据汇总统计
    async fetchSteelTradeInfo() {
      try {
        var params = {
          statisticalTime: this.statisticalTime,
          isTest: this.isTest
        };
        var res = await GetSteelTradeInfo(params);
        if (res.data.code === "0") {
          this.$set(this, "todaySalesVolume", res.data.result.todaySalesVolume);
          this.$set(this, "todayGrossMargin", res.data.result.todayGrossMargin);
          this.$set(this, "sumSalesVolume", res.data.result.sumSalesVolume);
          this.$set(this, "sumGrossMargin", res.data.result.sumGrossMargin);
          this.$set(this, "sumProcurement", res.data.result.sumProcurement);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 库房累计销量统计
    async fetchFactoryProcurement() {
      try {
        var params = {
          statisticalTime: this.statisticalTime,
          queryType: this.sumProcurementTypeDefalut,
          isTest: this.isTest
        };
        var res = await GetDataByTarget(params);
        if (res.data.code === "0") {
          var unit = "采购量 (吨)";
          var option = this.returnOption(
            res.data.result.list,
            unit,
            "#da34fb",
            "#6937fd"
          );
          this.$set(this, "factoryProcurementOption", option);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 厂家累计销量
    async fetchFactorySumSale() {
      try {
        var params = {
          statisticalTime: this.statisticalTime,
          queryType: this.factorySumSaleTypeDefalut,
          isTest: this.isTest
        };
        var res = await GetDataByTarget(params);
        if (res.data.code === "0") {
          var unit = "销售量 (吨)";
          var option = this.returnOption(
            res.data.result.list,
            unit,
            "#31cee6",
            "#0c43fd"
          );
          this.$set(this, "factorySumSaleOption", option);
        }
      } catch (e) {
        console.log(e);
      }
    },
    onFactorySumSaleType() {
      this.fetchFactorySumSale();
    },
    // 累计采购量
    async fetchSumProcurement() {
      try {
        var params = {
          statisticalTime: this.statisticalTime,
          queryType: "24011",
          isTest: this.isTest
        };
        var res = await GetDataByTarget(params);
        if (res.data.code === "0") {
          var unit = "采购量 (吨)";
          var option = this.returnOption(
            res.data.result.list,
            unit,
            "#31cee6",
            "#6937fd"
          );
          this.$set(this, "sumProcurementOption", option);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 库房日销量统计
    async fetchWarehouseDaySale() {
      try {
        var params = {
          statisticalTime: this.statisticalTime,
          queryType: this.warehouseDaySaleTypeDefalut,
          isTest: this.isTest
        };
        var res = await GetDataByTarget(params);
        if (res.data.code === "0") {
          var unit = "销售量 (吨)";
          var option = this.returnOption(
            res.data.result.list,
            unit,
            "#da34fb",
            "#6937fd"
          );
          this.$set(this, "warehouseDaySaleOption", option);
        }
      } catch (e) {
        console.log(e);
      }
    },
    onWarehouseDaySaleType() {
      this.fetchWarehouseDaySale();
    },
    //  厂家日销量统计
    async fetchDaySale() {
      try {
        var params = {
          statisticalTime: this.statisticalTime,
          queryType: this.daySaleTypeDefalut,
          isTest: this.isTest
        };
        var res = await GetDataByTarget(params);
        if (res.data.code === "0") {
          var unit = "销售量 (吨)";
          var option = this.returnOption(
            res.data.result.list,
            unit,
            "#31cee6",
            "#6937fd"
          );
          this.$set(this, "daySaleOption", option);
        }
      } catch (e) {
        console.log(e);
      }
    },
    onDaySaleType(res) {
      this.fetchDaySale();
    },
    // unit:单位  startColor:开始的颜色  endColor:结束的颜色
    returnOption(res, unit, startColor, endColor) {
      var xData = [];
      var symbolClip = true;
      var max = 0;
      var data1 = {
        type: "bar",
        name: "",
        label: {
          normal: {
            show: true,
            position: "top",
            textStyle: {
              color: startColor,
              fontWeight: "bold",
              fontFamily: "DIN Condensed Bold",
              fontSize: "22"
            }
          }
        },
        itemStyle: {
          normal: {
            barBorderRadius: [30, 30, 0, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: startColor
              },
              {
                offset: 1,
                color: endColor
              }
            ])
          }
        },
        z: 10,
        symbolBoundingData: max,
        data: [],
        barWidth: 20
      };
      res.forEach(item => {
        xData.push(item.name);
        var obj = {};
        max = Number(item.value) > max ? Number(item.value) : max;
        obj.value = item.value;
        obj.symbolClip = symbolClip;
        data1.data.push(obj);
      });
      data1.symbolBoundingData = max;
      var option = {
        xAxis: {
          data: xData,
          axisLabel: {
            rotate: 45,
            formatter: function(value, index) {
              return "{value|" + value + "}";
            }
          }
        },
        yAxis: {
          name: unit,
          nameGap: 30,
          nameTextStyle: {
            color: "#31cee6"
          }
        },
        legend: {
          show: false
        },
        tooltip: {
          axisPointer: {
            shadowStyle: {
              color: {
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0,0,0,0)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(0,209,255,0.2)" // 100% 处的颜色
                  }
                ]
              }
            }
          },
          formatter: params => this.formatterModal(res, params, unit)
        },
        grid: {
          bottom: "20%"
        },
        series: [data1]
      };
      return option;
    },
    onNav(id) {
      this.tabId = id;
      $(".bg4Con").scrollTop(0);
      this.fetchData(); // 获取数据
    },
    formatterModal(res, params, unit, color) {
      var minResult = "";
      if (res[0].list) {
        res[params[0].dataIndex].list.forEach(item => {
          var minItem =
            "<div style='display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:0 10px'><span>" +
            item.name +
            "</span><span style='margin-top:2px;font-size:20px;font-family:DIN Condensed Bold'>" +
            item.value +
            "</span></div>";
          minResult += minItem;
        });
      }
      var index = params[0].dataIndex;
      var val = res[index].value;
      var nowColor = color || "#31cee6";
      var imgConStart =
        "<div style='display:flex;padding:12pt 10px;color:" +
        nowColor +
        ";flex-direction:column;background:rgba(0,0,0,0.7);border-radius:10px;'>" +
        "<span style='width:100%;font-size:30px;padding:8pt 0 0 0 ;font-family:DIN Condensed Bold'>" +
        val +
        "</span>" +
        "<div style='width:100%;display:flex;align-items:center;justify-content:space-between;flex-direction:row;margin-top:8pt;font-size:12px'>";

      var result =
        minResult === ""
          ? imgConStart + "</div>"
          : imgConStart + minResult + "</div>";
      return result;
    },
    initTransactionStatisticChart(res) {},
    setDataTime(name, num) {
      this[name].startTime = this.$store.getters.gTime[0];
      this[name].endTime = this.$store.getters.gTime[1];
      if (num) {
        this[name].queryType = num;
      }
    },
    // 获取数据
    fetchData() {
      // 厂家日销量统计
      this.fetchDaySale();
      // 库房日销量
      this.fetchWarehouseDaySale();
      // 累计采购量
      this.fetchSumProcurement();
      // 厂家累计销量
      this.fetchFactorySumSale();
      // 厂家累计销售量
      this.fetchFactoryProcurement();
      // 钢贸系统采销数据汇总统计
      this.fetchSteelTradeInfo();
    },
    // 跳页面
    pushPage(name) {
      this.$router.push({
        path: name
      });
    }
  }
};
</script>
<style scoped>
.sellAnalyDate { margin-top: 60px; }
.sellAnalyDate .selDateCon { padding: 0 !important; }

.topRightTextCon {
  display: flex;
}
.selCon {
  margin-right: 45px;
}
.topRightCon {
  display: flex;
  margin-left: 20px;
  align-items: center;
  justify-content: center;
  background-image: url("../../../../../static/img/gq/yingxiaocaigou.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 344px;
  height: 333px;
  color: #2ff0d2;
}
.itemTopText {
  font-size: 20px;
  margin-left: 10px;
}
.bottomSelBtn {
  margin-right: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.bottomSelBtn .storeUnActive .el-button {
  background: transparent;
  border: 0;
  color: #1776fd;
}
.bottomSelBtn .storeActive .el-button {
  background: #1776fd;
  border: 1px solid #1776fd;
  color: black;
}

.topLeftItem .itemTop {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  color: #2ff0d2;
}
.topLeftItem .itemTopIcon {
  width: 20px;
  height: 21px;
}
.topLeftItem {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin-top: 38px;
  margin-left: 106px;
}
.topLeftItem:first-child {
  margin-left: 0px;
}

.topLeftItem:nth-child(4) {
  margin-left: 0px;
}

.lineImg {
  width: 1712px;
  height: 8px;
  background-image: url("../../../../../static/img/bigData4/minLine.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #2ff0d2;
}

.lineCon {
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
}
.chartLine {
  width: 1px;
  height: 332px;
  background: rgba(49, 206, 230, 0.2);
  position: absolute;
  right: 0;
  top: 10%;
}
.minTopLeftCon {
  position: relative;
  margin-top: 10px;
}
.midCon {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 1804px;
  height: 792px;
  background-image: url("../../../../../static/img/bigData4/board_xl.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #2ff0d2;
}
.topRightLLine {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 36pt;
  margin-top: 12pt;
}
.topRightLTopTitle {
  font-size: 20px;
  margin-left: 6pt;
}
.topRightLTopTitleLine {
  width: 3px;
  height: 14px;
  margin-top: 6px;
  background: #2ff0d2;
}
.topRightCon span {
  font-size: 50px;
  line-height: 60px;
  margin-top: 2px;
}
.topLeftCon {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  background-image: url("../../../../../static/img/gq/yingxiaoshuju.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 711px;
  height: 333px;
  color: #2ff0d2;
}
.topLeftCon span {
  font-size: 50px;
  line-height: 60px;
  margin-top: 2px;
}
.topBottomLines {
  bottom: -6pt;
  transition: left 0.5s;
  left: 0;
  height: 3px;
  background: #31cee6;
  position: absolute;
}

.active {
  font-weight: bold;
}
.topNavaArrItem {
  display: flex;
  color: rgba(49, 206, 230, 0.8);
  font-size: 18px;
  cursor: pointer;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 13px;
  height: 16px;
  border-left: 1px solid rgba(49, 206, 230, 0.2);
}
.topNavaArrItem:nth-child(1) {
  border-left: 0;
}
.topNavs {
  position: relative;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12pt;
}
.topNavArr {
  width: 100%;
  display: flex;
  height: 79px;
  align-items: flex-end;
  justify-content: center;
}
.itemTop {
  text-align: center;
  color: #2ff0d2;
}
</style>
<style>
@import "../../../../styles/element-ui/select.css";
.sellAnalyDate .dateLeft .el-input__icon { width: 40px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.sellAnalyDate .el-input--prefix .el-input__inner { padding-left: 50px; padding-right: 20px; }
</style>